<template>
  <el-dialog title="公开课直播七日表" :lock-scroll="false" :visible.sync="visible" customClass="classschedule">
    <div class="classschedule-view">
      <ul class="course-time">
        <li v-for="(item, index) in course" @click="courseIndex = index" :class="{active: courseIndex === index}">
          <span>{{item.date}} <em>{{item.week}}</em> </span>
        </li>
      </ul>
      <div class="course-detail">

        <div class="course-info" v-for="(item, index) in course" v-show="courseIndex === index">
          <table class="course-info-table">
            <thead>
            <tr>
              <th>时间</th>
              <th>主题</th>
              <th>牛人</th>
              <!--<th>知识点</th>-->
              <th>主讲品种</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="detail in item.list">
              <td class="first-line active">{{detail.begin_time + '-' + detail.end_time}}</td>
              <td>{{detail.title}}</td>
              <td>{{detail.coffee_name}}</td>
              <!--<td>{{detail.knowledge_point}}</td>-->
              <td>{{detail.types}}</td>
              <td class="td-last-a">
                <!--<a class="see-lubo" href=""><i></i>查看录播</a>-->
                <a class="k-download" :href="detail.download" v-if="detail.download"><i></i>课件下载</a>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'class-schedule',
    data () {
      return {
        visible: false,
        courseIndex: 0,
      }
    },
    props: {
      course: {
        default: false,
      },
    },
    methods: {
      showToggle () {
        this.visible = !this.visible
        console.log('course', this.course)
      },
    },
  }
</script>

<style lang="scss">
  .classschedule {
    width: 1016px;
    height: 565px;
    background-color: #ffffff;
    border-radius: 5px;
    .el-dialog__header {
      text-align: center;
    }
    .el-dialog__title {
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      color: #333333;
      position: relative;
      &:before {
        position: absolute;
        content: '';
        width: 20px;
        height: 1px;
        background: #333333;
        left: -30px;
        top: 10px;
      }
      &:after {
        position: absolute;
        content: '';
        width: 20px;
        height: 1px;
        background: #333333;
        right: -30px;
        top: 10px;
      }
    }
    .el-dialog__body {

    }

    .classschedule-view {
      .course-time {
        height: 40px;
        text-align: center;
        li {
          float: left;
          width: 120px;
          height: 35px;
          background-color: #ffffff;
          border-radius: 3px;
          border: solid 1px #d5d5d5;
          line-height: 35px;
          margin-right: 22px;
          cursor: pointer;
          &:last-child {
            margin-right: 0;
          }
          &:first-child {
            width: 124px;
          }
          span {
            em {
              padding-left: 5px;
            }
          }
        }
        .active {
          background-color: #3c92e8;
          color: #ffffff;
          border-color: #3c92e8;
        }
      }

      .course-detail {
        .course-info {
          margin-top: 15px;
          padding-bottom: 10px;
          overflow: auto;
          height: 405px;
          .course-info-table {
            thead {
              > tr {
                border-bottom: solid 2px #3c92e8;
                th {
                  height: 30px;
                  line-height: 30px;
                }
              }
            }
            tbody {
              tr {
                height: 50px;
                line-height: 50px;
                border-bottom: solid 1px #bacfe5;
                &:nth-child(2n-1) {
                  background-color: #fafdff;
                }
              }
              td {
                text-align: center;
                &:first-child {
                  padding-left: 20px;
                }
              }
              .first-line {
                position: relative;
                &:before {
                  position: absolute;
                  top: 0;
                  left: 21px;
                  content: '';
                  height: 52px;
                  width: 2px;
                  background: #dddddd;
                }
                &:after {
                  position: absolute;
                  top: 18px;
                  left: 13px;
                  content: '';
                  width: 18px;
                  height: 18px;
                  display: block;
                  background: url("../../static/img/yuandian.png");
                }
              }
            }
          }
          table {
            width: 100%;
            .td-last-a {
              text-align: center;
              a {
                display: inline-block;
                text-align: center;
                line-height: 30px;
                color: #ffffff;
              }
              .see-lubo {
                width: 110px;
                height: 30px;
                background-color: #1968b1;
                border-radius: 3px;
                margin-right: 15px;
                i {
                  width: 17px;
                  height: 10px;
                  display: inline-block;
                  margin-right: 3px;
                  background: url("../../static/img/see_icon.png");
                }
              }
              .k-download {
                width: 110px;
                height: 30px;
                background-color: #eeae37;
                border-radius: 3px;
                i {
                  width: 15px;
                  height: 15px;
                  display: inline-block;
                  margin-right: 3px;
                  background: url("../../static/img/download_icon.png");
                }
              }
              .z-zhibo-a {
                width: 110px;
                height: 30px;
                background-color: #de4414;
                border-radius: 3px;
                i {
                  width: 12px;
                  height: 12px;
                  display: inline-block;
                  margin-right: 3px;
                  background: url("../../static/img/play_icon.png");
                }
              }
            }
          }
        }
      }
    }
  }
</style>
